<template>
    <div class="contactGateway">
        <div class="buttonList" v-for="(item,index) in gateways">
            <div class="flexItem">
                <div class="button" @click="onBindGatewayDevice(item)">{{item.name}}</div>
            </div>
        </div>
        <div class="add">
            <div class="button" @click="onGeneralClick('/addGatewayStep1',null)">新增</div>
        </div>
        <van-popup v-model="show" ><van-loading color="#1989fa" /></van-popup>
    </div>
</template>

<script>
    import { Dialog,Toast,Loading,Popup  } from 'vant';
    import { post } from "../../js/utils";
    import { TenonWebsocket } from "../../js/websocket";

    export default {
        name: 'ContactGateway',
        components: {
            vanLoading: Loading,
            vanPopup: Popup
        },
        data () {
            return {
                show: false,
                devId : this.$route.query.devId,
                gateways: [],
            }
        },
        beforeCreate () {
            //获取用户绑定的网关
            post("/user/listGateways").then(
                ret=>{
                    //1、获取gateway列表
                    this.gateways = ret.gateways.map((gateway,index)=>{
                        return Object.assign({gatewayId:gateway.Id,name:gateway.Id})
                    })
                    //合并网关id，得出设备列表
                    /*let GatewayIds = ret.userGatewayKvs.map((item) => {
                        return item.GatewayId;
                    });
                    GatewayIds.sort((a, b) => a - b);
                    //根据设备列表，合并设备列表的keyValue
                    GatewayIds.map((item)=>{
                        let userGatewayAttributes  = { GatewayId: item };
                        ret.userGatewayKvs.map(({ GatewayId,Key,Value},index)=>{
                            if(item == GatewayId){ //若设备id一致，则合并KeyValue属性到列表中
                                Object.assign(userGatewayAttributes,{ [Key]: Value})
                            }
                        })
                        this.gateways.push(userGatewayAttributes);//返回该设备的所有属性
                    })*/
                }
            )

        },
        methods: {
            onGeneralClick: function (link, queryParams) {
                this.$router.push({
                    path: link,
                    query: queryParams
                });//其中login是你定义的一个路由模块
            },
            onBindGatewayDevice: function(item){
                let devId = this.devId;
                Dialog.confirm({
                    title: '绑定设备网关',
                    message: '是否绑定设备网关'+ item.name
                }).then(() => {

                    //1、显示绑定中
                    this.show = true;
                    let _this = this;

                    /**let toast1 = Toast.loading({
                        duration: 0,
                        message: '网关绑定中...',
                    });**/

                    //2、定义发送指定命令的回调函数
                    TenonWebsocket.msgHandlerCallbackMap.set('CmdFromGateway'+'devAddSuccess',function(data){
                        //toast1.clear()
                        _this.show = false;
                        Toast.success("网关绑定成功");
                    })

                    //3、绑定网关时发送消息让网关处于等待状态
                    TenonWebsocket.sendData(JSON.stringify({
                        "Cmd":"CmdToGateway",
                        "SubCmd":"addDev",
                        "GatewayId": item.gatewayId,
                        "DevId": _this.devId
                    }))
                }).catch(() => {
                    // on cancel
                });
            }
        }
    }
</script>

<style scoped>
    .contactGateway > .van-popup{
        background-color: rgba(0,0,0,0);
    }
    .contactGateway > .add {
        width: 100vw;
        min-height: 8vh;
        margin-top: 8px;
        display: flex;
        justify-content: center;
        line-height: 8vh;
    }

    .contactGateway > .add > .button {
        width: 80vw;
        min-height: 8vh;
        background: url(../../assets/product_orange.png) no-repeat;
        color: #fff;
        background-size: 100% 100%;
    }

    .contactGateway > .buttonList > .flexItem {
        width: 100vw;
        min-height: 8vh;
        margin-top: 8px;
        display: flex;
        justify-content: center;
        line-height: 8vh;
    }

    .contactGateway > .buttonList > .flexItem > .button {
        width: 80vw;
        min-height: 8vh;
        background: url(../../assets/product_orange.png) no-repeat;
        color: #fff;
        background-size: 100% 100%;
        align-self: center;
    }

    .contactGateway > .buttonList > .flexItem > .button:active {
        width: 80vw;
        min-height: 8vh;
        background: url(../../assets/product_grep.png) no-repeat;
        color: orange;
        background-size: 100% 100%;
        align-self: center;
    }


</style>
